<template>
  <span>
    <el-upload
      :http-request="request"
      action="1"
      class="avatar-uploader"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <!-- 差视频和变按钮和删除！ -->
      <img v-if="value" :src="value" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </span>
</template>

<script>
import { questionupload } from '@/api/tklb'
export default {
  props: ['value'],
  data () {
    return {
      num: 0
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg'
      const isLt5M = file.size / 1024 / 1024 < 8

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 8MB!')
      }
      return isJPG && isLt5M
    },

    async request (file) {
      let formdata = new FormData()
      formdata.append('file', file.file)
      const res = await questionupload(formdata)
      // console.log(res)
      this.$emit('input', `http://localhost/heimamm/public/` + res.data.url)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep {
  .avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
